<template>
  <div class="dataoverview">
    <!-- 数据显示头部 -->
    <el-card>
      <div class="box">
        <div>
          <div class="circle">{{ list.increment_users }}</div>
          <div class="text">今日新增用户</div>
        </div>
        <div>
          <div class="circle">{{ list.total_users }}</div>
          <div class="text">总用户量</div>
        </div>
        <div>
          <div class="circle">{{ list.increment_questions }}</div>
          <div class="text">新增试题</div>
        </div>
        <div>
          <div class="circle">{{ list.total_questions }}</div>
          <div class="text">总试题量</div>
        </div>
        <div>
          <div class="circle">{{ list.total_done_questions }}</div>
          <div class="text">总刷题量</div>
        </div>
        <div>
          <div class="circle">{{ list.personal_questions }}</div>
          <div class="text">人均刷题量</div>
        </div>
      </div>
    </el-card>
    <!-- Echarts 饼图部分 -->
    <el-card>
      <div ref="chart" style="width: 100%; height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { Datatitle, Datastatistics } from '@/api/dataoverview'
export default {
  data () {
    return {
      dataoven: [],
      list: {}
    }
  },
  created () {
    Datatitle().then(res1 => {
      this.list = res1.data
    })

    Datastatistics().then(res => {
      this.dataoven = res.data
      console.log('000', this.dataoven)
    })
  },
  mounted () {
    setTimeout(() => {
      console.log(this.dataoven)
      let myChart = echarts.init(this.$refs.chart)
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: 'white',
            fontWeight: 'normal'
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            color: [
              '#6e7074',
              '#546570',
              '#c4ccd3',
              '#c23531',
              '#2f4554',
              '#61a0a8',
              '#d48265',
              '#91c7ae',
              '#749f83',
              '#ca8622',
              '#bda29a',
              '#6e7074'
            ],
            // backgroundColor: 'pink',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                color: 'pie'
              }
            },
            labelLine: {
              show: false
            },
            data: this.dataoven
          }
        ]
      })
    }, 1000)
  },
  methods: {
    // async getData () {
    //   const res = await Datastatistics()
    //   this.dataoven = res.data
    //   console.log('用户列表数据', res)
    //   console.log(this.dataoven)
    // }
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 120px;
  //margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  text-align: center;
  margin: 0 50px;
  line-height: 100px;
  border: 2px solid #3a9d3a;
}
.text {
  text-align: center;
  margin: 0 50px 15px 50px;
}
</style>
